<template>
	<view class="QA page-main">
		<view class="title">
			<router-link :underline="false" :to="{ path: '/pages/user/index' }"><span class="arrowLeft"></span></router-link>
			<span class="name">{{$t('user.qa')}}</span>
			<span></span>
		</view>
		<view class="qaList" v-if="ZH==true">
			<dl v-for="(item,index) in qaList">
				<dt><strong>Q{{index+1}}</strong>{{item.questionZh}}</dt>
				<dd>{{item.answerZh}}</dd>
			</dl>
		</view>
		<view class="qaList" v-else>
			<dl v-for="(item,index) in qaList">
				<dt><strong>Q{{index+1}}</strong>{{item.question}}</dt>
				<dd>{{item.answer}}</dd>
			</dl>
		</view>
	</view>
</template>

<script>
import authMixin from '@/mixins/auth'
import { getToken } from '@/utils/auth'
import cookie from 'js-cookie'

export default {
	mixins: [authMixin],
	data() {
		return {
			ZH:false,
			qaList: []
		}
	},
	methods: {
		goBack() {
			this.$router.push('/pages/my/index')
		},
		async getQuestions() {
			let params = {
				token: getToken()
			}
			const {code, data} = await this.$api.my.getQuestions(params)
			console.log(code, data)
			if(code === 200) {
				this.qaList = data
			}
		}
	},
	mounted() {
		if('ZH'==cookie.get('lang')){
			this.ZH=true;
		}else{
			this.ZH=false;
		}
		console.log(this.ZH);
		this.getQuestions()
	}
}
</script>

<style lang="scss" scoped>
.QA {
	a{
		text-decoration: none;
		color: #333;
	}
	padding:0 40rpx;
	position: relative;
	height: 100%;
	background:#fff url('@/static/images/set/setbg.png') no-repeat;
	background-size:100%;
	.title{
		width:100%;
		padding:20rpx;
		// display: flex;
		// justify-content: space-between;
		box-sizing: border-box;
		.arrowLeft{
			display: inline-block;
			background:url(@/static/images/user/left.png) no-repeat 0 10rpx;
			width:50rpx;
			height:50rpx;
			background-size:100%;
		}
		.name{
			font: 500 80rpx/60rpx PingFangSC;
			color: #fff;
			padding-top: 200rpx;
			display: block;
		}
		
	}
	.qaList{
		margin-top:76rpx;
		dl{
			width: 100%;
			dt{
				width: 100%;
				height:92rpx;
				line-height:92rpx;
				background: #F9A6E9;
				border-radius: 40rpx 40rpx 0px 0rpx;
				font-size:28rpx;
				padding:0 20rpx;
				box-sizing: border-box;
				color:#fff;
				font-weight: 400;
				strong{
					display: inline-block;
					margin-right: 10rpx;
				}
			}
			dd{
				width: 100%;
				padding:20rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 40rpx 0rpx rgba(109,80,223,0.1);
				border-radius:0 0 40rpx 40rpx;
				font-size:28rpx;
				line-height:48rpx;
				margin-bottom:40rpx;
				color: #333;
				white-space :normal
			}
		}
	}
}
</style>
